<template>
    <div class="page-narrow">
        <h1>变量</h1>
        <h2>色彩</h2>
        <pre class="scss">

$colorPackages: (
    default: (
        themeColor: #666,
        frontColor: #666,
        bgColor: #ccc,
    ),
    primary: (
        themeColor: #409eff,
        frontColor: #fff,
        bgColor: #409eff,
    ),
    secondary: (
        themeColor: lighten(#409eff, 10%),
        frontColor: #fff,
        bgColor: lighten(#409eff, 10%),
    ),
    success: (
        themeColor: #67c23a,
        frontColor: #fff,
        bgColor: #67c23a,
    ),
    warning: (
        themeColor: #e6a23c,
        frontColor: #fff,
        bgColor: #e6a23c,
    ),
    error: (
        themeColor: #f56c6c,
        frontColor: #fff,
        bgColor: #f56c6c,
    ),
);

$defaultBgColor: #fff;
$defaultShadowColor: #ccc;
$defaultBorderColor: #dedede;
        </pre>

        <h2>尺寸</h2>
        <pre class="scss">
            
$sizePackages: (
    xs: (
        size: 20px,
        fontSize: 12px,
        borderRadius: 2px,
        space: 5px,
    ),
    s: (
        size: 30px,
        fontSize: 14px,
        borderRadius: 4px,
        space: 10px,
    ),
    m: (
        size: 40px,
        fontSize: 16px,
        borderRadius: 6px,
        space: 15px,
    ),
    l: (
        size: 50px,
        fontSize: 18px,
        borderRadius: 8px,
        space: 20px,
    ),
    xl: (
        size: 60px,
        fontSize: 20px,
        borderRadius: 10px,
        space: 25px,
    ),
);
        </pre>
    </div>
</template>